<template>
	<view class="content flex-box" :style="{'--color': color}">
		<status-bar ref='statusbar' :title='title' back='0' search='1'></status-bar>

		<view class="kite-nav" :style="{'top':navHeight+'px'}">
			<view class="search-content flex-box align-center">
				<view class="position-box flex-box align-center" v-if='city' @click="toUrl('/pages/classify/citySelect')">
					<text class="iconfont icon-dingwei thmeColor" :style="{'--color': color}"></text>
					<text class="txt lines">{{city}}</text>
				</view>
				<navigator class="navigator-search flex" url="/pages/classify/search">
					<view class="kite-search flex-box align-center">
						<text class="iconfont icon-btn_search" @click="goodsSearch"></text>
						<view class="kite-search-input flex">
							<text class="kite-search-title">{{searchVal}}</text>
						</view>
					</view>
				</navigator>
			</view>
		</view>

		<view class="kite-wrapper flex-box flex" v-if='onceLevel.length > 0'>
			<view class="kite-classify flex-box">
				<view>
					<view class="kite-classify-names" :style="{'--color': color}" v-for="(item,index) in onceLevel" :key="index" :class="{
							'kite-classify-active thmeColor':current == index,
							'active-prev': current-1 == index,
							'active-next': current+1 == index
						}" @click="classifyChk(item.classify_id,index)">
						<view class="kite-classify-box">
							<text class="kite-classify-name">{{item.classify_name}}</text>
						</view>
					</view>
				</view>
				<view class="flex bottomEmpty" :class="{'active-next':current == onceLevel.length-1}"></view>
			</view>

			<view class="kite-classify-content">
				<view>
					<!-- 形象图 -->
					<view class="kite-classify-banner" v-if='onceLevel[current].classify_atlas'>
						<navigator hover-class="none"
							:url="'/pages/goods/goods_list?classId=' + onceLevel[current].classify_id +'&className=' +onceLevel[current].classify_name">
							<image class="kite-banner" :src="onceLevel[current].classify_atlas" mode="aspectFill"></image>
						</navigator>
					</view>

					<view class="kite-goods-box" v-if='secondLevel.length > 0'>

						<view class="kite-classify-goods" v-if="item.li && item.li.length > 0" v-for="(item,index) in secondLevel" :key="index">
							<view class="kite-goods">
								<view class="kite-goods-title flex-box align-center">
									<text class="tag1 thmeBg" :style="{'--color': color}"></text>
									<text class="txt">{{item.name}}</text>
								</view>
								<view class="kite-goods-warpper" v-for="(e,i) in item.li" :key='i'>
									<navigator hover-class="none" :url="'/pages/goods/goods_list?classId=' + e.id +'&className=' + e.name">
										<view class="kite-img-box">
											<image class="kite-goods-img" :src="e.img?imgUrl+e.img:staticUrl+'/images/imageLoading.png'" mode="aspectFit">
											</image>
										</view>
										<view class="kite-goods-type">
											<text>{{e.name}}</text>
										</view>
									</navigator>
								</view>
								<view class="kite-clear"></view>
							</view>
						</view>


						<view class="kite-classify-goods">
							<view class="kite-goods">
								<view class="kite-goods-warpper" v-if="!item.li" v-for="(item,index) in secondLevel" :key="index">
									<navigator hover-class="none" :url="'/pages/goods/goods_list?classId=' + item.id +'&className=' + item.name">
										<view class="kite-img-box">
											<image class="kite-goods-img" :src="item.img?imgUrl+item.img:staticUrl+'/images/imageLoading.png'" mode="aspectFit">
											</image>
										</view>
										<view class="kite-goods-type">
											<text>{{item.name}}</text>
										</view>
									</navigator>
								</view>
								<view class="kite-clear"></view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="row j-sb " v-if="pageList.length">
					<block v-for="(item,index) in pageList" :key="index">
						<view class="list" @click="toUrl(`/pages/goods/goodsDetail?goodsid=${item.goods_id}`)">
							<image :src="imgUrl+item.img" mode="aspectFill" class="list_Img"></image>
							<view class="listContent">
								<view class="rows ellipsis size30">{{item.name}}</view>
								<view class="row j-sb a-center m-top20">
									<view class="d-flex a-center color">
										<text class="h7">￥</text>
										<text class="size32">{{item.price}}</text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<empty type='1' cat='2'  msg='暂无信息' v-else></empty>
				
			</view>
		</view>




	
		
		
		<empty type='1' cat='2' v-if="noData" :msg='msg'></empty>
	</view>
</template>

<script>
	var that;
	export default {
		props: ['title'],
		data() {
			return {
				navHeight: getApp().globalData.navHeight,
				color: getApp().globalData.color,
				searchVal: '请输入搜索信息',
				imgUrl: this.imgUrl,
				classifyId: '',
				current: 0,
				bid: uni.getStorageSync('bid'),
				secondLevel: [],
				onceLevel: [],
				classifyImg: '',
				noData: false,
				noData1: false,
				staticUrl: this.staticUrl,
				city: uni.getStorageSync('city'),
				msg: '',
				
				next: 0, // 0 没有下一级 1 有下一级
				page: 1,
				pageNum: 10,
				scrollTop:0,
				pageList:[],
				getMore:true,
			}
		},
		created() {
			that = this;
			// #ifdef H5
			this.H5Share()
			// #endif
		},
		onShow() {
			that = this;
			that.topCategory();
			// #ifdef H5
			this.H5Share()
			// #endif
		},

		methods: {
			topCategory: function() {
				that.noData = false
				that.$http.post({
					url: '/singleSaleApi/allUpList',
					data: {
						bid: that.bid,
						city: that.city ? that.city : '',
						v_id: uni.getStorageSync('vid')
					}
				}).then(res => {
					if (res.errcode != '100') {
						that.onceLevel = []
						that.noData = true
						that.msg = res.msg ? res.msg : '没有任何分类哦';
						return;
					}
					that.onceLevel = res.data;
					that.next = res.next;
					that.classifyId = that.onceLevel[0].classify_id;
					that.goodsType();
					that.sortClassGoods();
					


				})
			},
			goodsType: function() {
				that.noData1 = false
				that.$http.post({
					url: '/singleSaleApi/goodsList',
					data: {
						classify_id: that.classifyId,
						bid: that.bid,
						city: that.city ? that.city : '',
						v_id: uni.getStorageSync('vid')
					}
				}).then(res => {
					if (res.errcode == 100 && res.data.list) {
						that.secondLevel = res.data.list;
						
					} else {
						that.noData1 = true
					}
				})
			},

			sortClassGoods() {
				that.$http.post({
					url: '/singleSaleApi/sortClassGoods',
					data: {
						bid: uni.getStorageSync('bid'),
						v_id: uni.getStorageSync('vid'),
						page: that.page,
						pageNum: that.pageNum,
						classify_id: that.classifyId,
						mode: 1
					}
				}).then(res => {
					if(res.code != '100') return;
					if(!res.data && that.page == 1) return that.pageList = [];
					if(res.data.DataArr.length < 10) that.getMore = false;	
					that.page == 1?that.pageList = res.data.DataArr:that.pageList = that.pageList.concat(res.data.DataArr)
				})
			},
			
			scrolltolowerList(){
				if(!that.getMore) return;
				that.page++;
				that.sortClassGoods();
			},
			
			classifyList(classify_id,index){
				that.current = index;
				that.classifyId = classify_id;
				that.getMore = true;
				that.scrollTop = 0;
				that.sortClassGoods();
			},

			classifyChk(id, index) {
				if (that.classifyId != id) {
					that.secondLevel = []
					that.current = index
					that.classifyId = id
					that.goodsType();
					that.sortClassGoods();
				}
			},

			goodsShow: function(hello) {
				uni.showModal({
					content: hello,
					showCancel: true
				});
			}
		},
		onShareTimeline() {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.desc,
				query: {
					share_v_id: vid
				},
				imageUrl: shareData.imageUrl
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid + '&pageType=99',
				imageUrl: shareData.imageUrl
			}
		},
	}
</script>

<style scoped lang="scss">
	.classify_rights{
		position: absolute;
		left: 180rpx;
		right: 0;
		width: calc(100% - 180rpx);
		box-sizing: border-box;
		top: 0;
		bottom: 10rpx;
		display: flex;
		justify-content: space-between;;
	}
	.list{
		width:260rpx;
		height: 380rpx;
		border:1rpx solid #dddddd;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}
	.list_Img{
		width:100%;
		height: 250rpx;
	}
	.listContent{
		width:100%;
		padding:10rpx;
		color:#333333;
		font-size: 28rpx;
	}
	.shopName{
		padding:4rpx 10rpx;
		border-radius: 10rpx;
		background-color: #FF0B03;
	}
	.content {
		width: 100%;
		background-color: #FFFFFF;
		flex-direction: column;
		height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
	}

	.kite-nav {
		left: 0;
		right: 0;
		z-index: 10;
		overflow-y: auto;
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #F5F5F5;
		height: 100rpx;

		.search-content {
			height: 100%;
			padding: 0 $uni-page-space;

			.position-box {
				background-color: #F5F5F5;
				padding: 0 20rpx;
				height: 60rpx;
				border-radius: 60rpx;
				margin-right: $uni-page-space;

				.txt {
					font-size: 26rpx;
					color: #333333;
					max-width: 180rpx;
				}

				.iconfont {
					font-size: 30rpx;
					margin-right: 10rpx;
				}
			}

			.navigator-search {
				.kite-search {
					background-color: #F5F5F5;
				}

				.kite-search-input {
					height: 50upx;
					line-height: 50upx;
					padding: 0 12rpx;

					.kite-search-title {
						color: #888;
					}
				}
			}
		}
	}

	.kite-wrapper {
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.kite-classify {
			width: 180rpx;
			overflow-y: auto;
			flex-direction: column;

			.kite-classify-names {
				position: relative;
				width: 100%;
				min-height: 100upx;
				text-align: center;
				background-color: #F5F5F5;
				display: flex;
				align-items: center;
				color: #333;
				padding: 20rpx 0;

				.kite-classify-box {
					width: 100%;
					color: inherit;
					display: flex;
					align-items: center;

					.kite-classify-name {
						font-size: 24upx;
						text-align: left;
						font-weight: 400;
						color: inherit;
						padding: 0 10rpx 0 20rpx;
					}
				}

				&.kite-classify-active {
					background-color: white;

					.kite-classify-name {
						font-weight: bold;
						font-size: 28rpx;

					}

					.kite-classify-box {
						width: 100%;
						border-left-width: 6upx;
						border-left-style: solid;
					}
				}

			}

			.bottomEmpty {
				background-color: #F5F5F5;
			}

			.active-prev {
				border-bottom-right-radius: 20rpx;
			}

			.active-next {
				border-top-right-radius: 20rpx;
			}
		}
		
		.classify_right{
			position: absolute;
			left: 150rpx;
			right: 0;
			width: calc(100% - 150rpx);
			box-sizing: border-box;
			top: 0;
			bottom: 100rpx;
			border: 1rpx solid red;
		}
	
		.kite-classify-content {
			flex: 1;
			padding: 20rpx 20upx 30rpx;
			overflow-y: auto;

			.kite-classify-banner {
				width: 100%;
				height: 190upx;
				border-radius: 16upx;
				overflow: hidden;
				margin-bottom: 20rpx;
				background-color: #F5F5F5;

				.kite-banner {
					width: 100%;
					height: 190upx;
				}
			}

			.kite-goods-box {
				width: 100%;
				height: auto;

				.kite-classify-goods {
					width: 98%;
					height: 100%;
					margin: 0 auto;
					box-sizing: border-box;

					.kite-goods-title {
						padding: 16rpx 10rpx 0 24rpx;

						.tag1 {
							display: inline-block;
							width: 6rpx;
							height: 26rpx;
							border-radius: 4rpx;
							margin-right: 10rpx;
						}

						.txt {
							font-size: 28upx;
							color: #333333;
						}
					}

					.kite-goods {
						width: 100%;
						box-sizing: border-box;
						box-shadow: inset 2upx -2upx 6upx 2upx #F8F8F8;
						margin: 0 0 20upx 0;
						overflow: hidden;
						border-radius: 6rpx;

						.kite-goods-warpper {
							float: left;
							width: 33.3%;
							height: 216upx;
							text-align: center;
							overflow: hidden;

							.kite-img-box {
								position: relative;
								width: 128upx;
								height: 160upx;
								overflow: hidden;
								margin: 0 auto;

								.kite-goods-img {
									position: absolute;
									width: 120upx;
									height: 120upx;
									top: 50%;
									left: 50%;
									transform: translate3d(-50%, -50%, 0);
								}
							}
						}
					}
				}
			}
		}
	}
</style>
